Vertex Array Object

VAO は、煩雑な頂点情報の管理を簡単にしてくれます。とは言っても、VAO 自体が VBO の代わりになるわけではありません。VAO は一度設定された頂点に関する情報をまとめて保持しておいてくれるものと考えるのがいいでしょう。

VBOのバインドを一括して行うことができるので便利

code:js

// VBOをバインドし登録する関数

function set_attribute(vbo, attL, attS){

// 引数として受け取った VBO の配列を順に処理する

for(var i in vbo){

// バッファをバインドする

// attributeLocationを有効にする

// attributeLocationを通知し登録する

}

}

同じ頂点データだけを使いまわしている場合ならともかく、複数のモデルを切り替えながらレンダリングするようなケースでは、こういった頂点データの扱いが非常に面倒でした。

レンダリングするモデルが切り替わる場合には、VBO や IBO を全て漏れなく都度バインドしなおしてやる必要がありました。

code:js

var VAO = ext.createVertexArrayOES();

ext.bindVertexArrayOES(VAO);

バインドが完了すると、ここから先に行うすべての頂点関連処理(主に Attribute 系)を通じて VAO に頂点情報が登録されていきます。先ほど登場した自前の関数の中身で行っていたように、gl.bindBufferやgl.enableVertexAttribArray、gl.vertexAttribPointerなどを適宜呼び出しましょう。これらのメソッドが呼び出されるたびに VAO に情報がひとまとめにされて格納されていきます。

ここで勘のいい人なら気がついたかもしれませんが、VAO がバインドされている限り、同じ VAO に対して設定が上書きされていくことになります。ですから、異なるモデルの頂点情報を登録する際にはバインドする VAO を切り替えるのを忘れないようにしないと、どんどん設定が塗り替えられていってしまいますので注意しましょう。